<script setup>
import { useRouter } from "vue-router";

const { title } = defineProps({
  title: {
    type: String,
    default: "",
  },
});

const router = useRouter();
</script>
<template>
  <nav
    class="fixed top-0 right-0 left-0 z-10 flex items-center justify-center h-[45px] px-[55px] bg-black lg:hidden hover:opacity-80 focus:opacity-80"
  >
    <button
      type="button"
      aria-label="Go Back"
      class="p-[15px_25px] text-[15px] text-white cursor-pointer bg-secondary transition-all duration-300 hover:bg-[#2f2f2f] focus:bg-[#2f2f2f]"
      @click="router.go(-1)"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          fill="none"
          stroke="#fff"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-miterlimit="10"
          d="M16.5 20.5l-9-8.5 9-8.5"
        />
      </svg>
    </button>
    <p class="overflow-hidden text-sm text-ellipsis text-nowrap">
      {{ title }}
    </p>
  </nav>
</template>
